<template>
  <div class="upload-wrap">
    <!-- 用来上传的 -->
    <!-- 
      action： 上传图片的地址（会自动上传到这个地址）
      list-type="picture-card" 就是设置为照片墙效果
      :on-preview： 当点击预览图标触发的钩子
      :on-remove：  当点击删除图标触发的钩子
      file-list： 保存上传的图片的数组
     -->
    <el-upload
      action="#"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :class="{ disabled: isDisabled }"
      :file-list="fileList"
      :http-request="uploadImg"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-progress v-if="showProg" style="width: 180px" :percentage="percent" />
    <el-dialog :visible.sync="dialogVisible" title="预览图片">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
// 导出
import COS from "cos-js-sdk-v5";
// 实例化一个操作腾讯云的对象
let cos = new COS({
  // 密钥id
  SecretId: "AKIDLUO8bnkPownNgiSw96lslOkskMhkW2GD",
  // 密钥key
  SecretKey: "h7G8j38wTjjSt3wYtwiETQ6VdU5RZR3Q",
});
export default {
  name: "imageUpload",
  data() {
    return {
      showProg: false,
      percent: 0,
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  methods: {
    beforeUpload(file) {
      // 要开始做文件上传的检查了
      // 文件类型 文件大小
      const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"];
      if (!types.includes(file.type)) {
        this.$message.error("上传图片只能是 JPG、GIF、BMP、PNG 格式!");
        return false;
      }
      //  检查大小
      const maxSize = 5 * 1024 * 1024;
      if (maxSize < file.size) {
        this.$message.error("图片大小最大不能超过5M");
        return false;
      }
      return true;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 点击删除图片触发的钩子
    handleRemove() {
      // 点击删除后清空数组，那么上传就可以显示了
      this.fileList = [];
    },
    uploadImg(params) {
      // 参数里有一个属性叫file，就是我们要选择的图片对象
      // file对象里面有一个name属性，就是图片的名字

      this.showProg = true;
      cos.putObject(
        {
          // 存储桶的名字，必须
          Bucket: "hr72-1305227224",
          // 储存桶所在地域，必须
          Region: "ap-guangzhou",
          // key为上传后的文件名,必须
          Key: params.file.name,
          StorageClass: "STANDARD",
          // 上传文件对象
          Body: params.file,

          // 上传进度的回调函数
          onprogress: (progressData) => {
            //  参数里有个属性叫percent就有进度，但是进度为0-1
            // 我们的进度是0-100，所以要乘以100
            this.percent = progressData.percent * 100;
          },
        },
        // 上传成功或失败都会调用的回调函数
        // 如果有err有值就代表失败了，如果没有值就代表成功了
        (err, data) => {
          if (!err) {
            // 上传成功之后的图片地址在data.Location
            this.fileList = [{ url: "http://" + data.Location }];
            this.percent = 0;
            this.showProg = false;
          }
        }
      );
    },

    // 文件状态改变触发
    handleChange(file, fileList) {
      // file就是改变的图片(例如你是添加的话，file就是添加的这张照片)
      // fileList就是改变后的文件数组
      // 因为我们只能添加一张，所以这里的fileList就是长度为一的数组
      // 赋值给this.fileList,this.fileList就有值了，有值就能让那个可以上传的框隐藏了
      this.fileList = fileList;
    },
  },
  computed: {
    isDisabled() {
      return this.fileList.length > 0;
    },
  },
};
</script>

<style lang='scss' >
.upload-wrap {
  .disabled {
    .el-upload--picture-card {
      display: none;
    }
  }
  .el-dialog {
    width: 500px;
    .el-dialog__body {
      height: 500px;
    }
  }

  // .el-dialog__header {
  //   padding: 40px 20px 10px;
  // }
}
</style>